 <template>
    <view class="zai-box">
        <scroll-view scroll-y class="page">
            <view style="text-align: center;" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<image src="/static/bdh.png" mode='aspectFit' class="zai-logo"></image>
				<view class="zai-title">数字农服</view>
			</view>
            <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">

                <view class="cu-form-group margin-top round shadow-blur">
                    <view class="title">手机号:</view>
                    <input placeholder="请输入手机号" name="telphone" v-model="telphone"></input>
				</view>
                <view class="cu-form-group margin-top round">
                    <view class="title">验证码:</view>
                    <input type="number" placeholder="请输入验证码" name="smsCode"  v-model="smsCode"></input>
					<view class="column-with-btn">
						<button  class='cu-btn bg-green  shadow' :class="{ active : !disableCodeBtn}" :disabled="disableCodeBtn" @tap="sendCode">{{codeBtn.text}}</button>
					</view>
				</view>
                <view class="padding  flex  flex-direction">
                    <button class="cu-btn bg-green shadow-blur round lg" :loading="loading"
                            @tap="onLogin"> {{loading ? "登录中...":"登 录"}}
                    </button>
                </view>
				<!-- #ifdef APP-PLUS -->
				<view class="padding flex flex-direction  text-center  ">
						当前版本:{{version}}
				</view>
				<!-- #endif -->
				
            </view>
        </scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/bdh.png" mode="aspectFit"></image>
			<view class="gray-text">登录中...</view>
		</view>
		<!-- <my-image-upload></my-image-upload>
		<my-select></my-select> -->
		<!-- <my-page></my-page> -->
    </view>

</template>

<script>
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import { mapActions } from "vuex"
	import myImageUpload from "@/components/my-componets/my-image-upload.vue"
	import mypage from "@/components/my-componets/my-page.vue"
	import myselect from "@/components/my-componets/my-select.vue"
	
    export default {
		components:{
			'my-image-upload':myImageUpload,
			'my-select':myselect
		},
        data() {
            return {
				captchaImg: '',
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds
				},
				sendCodeUrl:this.$config.apiUrl+"/appUserController/sendSms",
				loading: false,
				telphone: '',
				smsCode: '',//手动输入的code
				getSmsCode:'',//获取到的code
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version:''
            };
        },
		onLoad:function(){
			// #ifdef APP-PLUS
			var that=this
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
					that.version=wgtinfo.version
				} );
			// #endif
		},
        methods: {
			 ...mapActions([ "mLogin","PhoneLogin" ]),
			 sendCode: function () {
			 	this.codeBtn.waitingCode = true;
			 	this.codeBtn.count = this.seconds;
			 	this.codeBtn.text = this.codeBtn.count + 's';
			 	
			 	let countdown = setInterval( () => {
			 		this.codeBtn.count--;
			 		this.codeBtn.text = this.codeBtn.count + 's';
			 		if( this.codeBtn.count < 0 ){
			 			clearInterval(countdown);
			 			this.codeBtn.text = '重新发送';
			 			this.codeBtn.waitingCode = false;
			 		}
			 	},1000);
				this.$http.post(this.sendCodeUrl,{telphone:this.telphone}).then(res=>{
					 console.log(res)
					if (res.data.ok){
						let smsData = res.data.data;
						 console.log(smsData);
						this.getSmsCode=smsData.smsCode;
					}
				}).catch(()=>{
					this.$tip.loaded();
					this.$tip.error('发送验证码失败！')
				});
			 },
			onLogin: function (){
			        if(!this.telphone || this.telphone.length==0){
			          this.$tip.toast('请填写手机号');
			          return;
			        }
			        if(!this.smsCode || this.smsCode.length==0){
			           this.$tip.toast('请填写验证码');
			          return;
			        }
					/*if(this.smsCode!=this.getSmsCode){
						this.$tip.toast('验证码输入错误');
						return;
					}*/
			        let loginParams = {
			          telphone:this.telphone,
			          smsCode:this.smsCode
			        }
					this.loading=true;
			        this.PhoneLogin(loginParams).then((res) => {
					  console.log("PhoneLogin",res)
					  this.loading=false;
			          if(res.data.ok){
						  this.$tip.success('登录成功!')
						  this.$Router.replaceAll({name:'index'})
						 /* uni.reLaunch({
							url: '/pages/index/index'
						  }); */
			          }else{
			              this.$tip.alert(res.data.message);
			          }
			        }).catch((err) => {
			          let msg = err.data.message || "请求出现错误，请稍后再试"
			          this.$tip.alert(msg);
			        }).finally(()=>{
					  this.loading=false;
					})
			      }
        },
		computed: {
			disableCodeBtn: function (){
				return this.codeBtn.waitingCode || this.telphone.length != 11;
			} 
		}
    }
</script>

<style lang="scss" scoped>
	$color-primary: #b49950;
    .login-paddingtop {
        padding-top: 200 upx;
    }

    .zai-box {
        padding: 0 20 upx;
        padding-top: 100 upx;
        position: relative;
    }

    .zai-logo {
        width: 600upx;
        height: 600upx;
    }

    .zai-title {
       font-size: 58upx;
       color: #000000;
       text-align: center;
    }

    .input-placeholder, .zai-input {
        color: #94afce;
    }

    .zai-label {
        padding: 60 upx 0;
        text-align: center;
        font-size: 30 upx;
        color: #a7b6d0;
    }

    .zai-btn {
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100 upx;
        font-size: 36 upx;
    }

    .zai-btn:after {
        border: 0;
    }

    /*按钮点击效果*/
    .zai-btn.button-hover {
        transform: translate(1 upx, 1 upx);
    }

	.btn {
		box-sizing: border-box;
	}
	.column-with-btn{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		button{
			font-size: 24upx;
			margin: 0;
			width: 200upx;
			text-align: center;
			&:after{
				border: none
			}
			&.active{
				background-color: $color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}
</style>
